<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">

    <script th:src="@{js/jquery.min.js}"></script>
    <!--这里不用加/static,默认在里面找，加了反而报错-->
    <script th:src="@{js/bootstrap.min.js}"></script>
    <style>
        body{
            background-color: #555555;
            /*//background:url("../static/image/bg.jpg") fixed;*/
        }
        .title{
            font-size: 20px;
        }
        .header{
            /*position: relative;*/
            margin: 100px;

            color: white;
            text-align: center;
        }
        .thumbs_photo{
            height: 24px;
            width: 24px;
        }
        .context{
            text-align: right;
        }
        .message{
            background-color: rgb(250,250,250);
        }
        .messages{
            width: 800px;
        }
        .rank{
            position: absolute;
            margin-left: 50px;
            font-size: 20px;
        }
        .context{
            margin:0 200px;
            color: #e4b9b9;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand nav-tabs" th:href="@{/hello}">主页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form  class="search_form navbar-form navbar-left color-input-field">
                <div class="form-group ">
                    <input class="search_passage form-control" type="text" placeholder="搜索博客">
                </div>

                <button type="button" class="btn btn-default btn_search">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a th:href="@{/articleUp}"><span>文章发表</span></a></li>
                <li><a th:href="@{/self}"><span th:text="${session.user.getUserName()}"></span></a></li>
                <li class="admin_option" style="pointer-events:none;" ><a  th:href="@{/admin}">管理</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账号管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/changeBlog}">切换账号</a></li>
                        <li><a th:href="@{/selfInfo}">编辑资料</a></li>
                        <li><a data-toggle="modal" data-target="#logout_account">注销</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a th:href="@{/changeBlog}"><span  class="glyphicon glyphicon-off"> 退出</span></a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="header jumbotron " >
    <h1 class="">[[${article.header}]]</h1>
    <ol class="breadcrumb thumbs_ol">
        <li>作者:&nbsp<a th:href="@{'/bloger?id='+${check_user.userId}}">[[${check_user.userName}]]</a></li>
        <li>发表时间:&nbsp一天前</li>
        <li>点赞数:&nbsp<span class="stars_sum" style="color: white">[[${article.stars}]]</span>
         <a class="thumbs_photos" style="text-decoration: none">
        <img id="to_thumbs" class="thumbs_photo" style="display: inline-block" th:src="@{image/thumbs-up.png}">
        <img id="success_thumbs" class="thumbs_photo" style="display: none" th:src="@{image/thumbs_success.png}">
        </a>
        </li>
    </ol>


</div>
<nav class="container jumbotron col-lg-8 context">
    <p>[[${article.context}]]</p>
</nav>
<nav class="jumbotron col-lg-8 context" >



</nav>
<!--注销模态款-->
<div class="modal fade" id="logout_account" style="display: none" tabindex="-1" role="dialog" aria-labelledby="logout_account">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="logout_header" style="color:
                     #31b0d5;text-align: center">尊敬的[[${session.user.userName}]]</h2>
            </div>
            <form class="form-horizontal" style="text-align: center">
                <div class="logout_password" style="margin-top: 10px">输入密码:<input class="logout_password_input" type="password"></div>
                <p class="tip_logout_error" style="display: none;margin-top: 10px;color: darkred">密码错误，注销失败</p>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn_logout">确认注销</button>
                <button type="button" class="btn btn-default btn_logout_close" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

</body>
<script th:inline="javascript" >
    var userId = [[${session.user.userId}]];
    var password = [[${session.user.userPassword}]];
    sessionStorage.setItem("password",password);
    sessionStorage.setItem("userId",userId);
</script>
<script>

    //搜索功能
    $(".btn_search").click(function () {
        var search_blogId = $(".search_passage").val();
        $.ajax({
            url: "/search",
            type: "POST",
            data:{searchBlogId:search_blogId},
            datatype: "JSON",
            success: function (data) {
                if(data===-1){
                    alert("无该文章");
                    return false;
                }else{
                    window.location.href="/article?id="+ data;
                }
            }
        })
    })

        //点赞功能
        $(".thumbs_photos").click(function () {
            var child = $(this).children(".thumbs_photo");
            var parent = $(this).parent();
            var display = child[0].style.display;
            console.log(parent.text());
            console.log(display)
            console.log(child[0])
            console.log(child[1])
            if(display==="none"){
                child[1].style.display = "inline-block";
                child[0].style.display = "none";
                var sum = $(".stars_sum").text();
                var text = Number(sum)+1;
                $(".stars_sum").text(text.toString())
            }else{
                child[1].style.display = "none";
                child[0].style.display = "inline-block";
                var sum = $(".stars_sum").text();
                var text = Number(sum)-1;
                $(".stars_sum").text(text.toString())
            }
        })

    //注销账号
    $(".btn_logout").click(function () {
        var password = $(".logout_password_input").val();
        var real_password = sessionStorage.getItem("password");
        if(password !== real_password){
            $(".tip_logout_error").css("display","block");
        }else{
            $(".tip_logout_error").css("display","none");
            //删除
            logout_ajax();
        }
    })

    function logout_ajax(){
        $.ajax({
            url: "/logout",
            type: "POST",
            data:{userId:sessionStorage.getItem("userId")},
            dataType: "JSON",
            success: function (data) {
                alert("注销成功");
                window.location="/index";
            }
        })
    }

    $(".thumbs_photo").on("click",function () {
        var to_thumbs = $("#to_thumbs");
        var success_thumbs = $("#success_thumbs");
        var display = to_thumbs.css("display");
        if(display==="inline-block"){
            console.log(display)
            to_thumbs.css("display","none");
            success_thumbs.css("display" ,"inline-block");
        }else{
            console.log(display)
            success_thumbs.css("display","none");
            to_thumbs.css("display" ,"inline-block");
        }
    })
</script>
</html>